<script setup>
import {ref, onBeforeUnmount} from "vue";
import {onHide, onLoad, onPageScroll, onShow} from "@dcloudio/uni-app";
import {conUtils} from "../utils/conUtils";
import {useCommonInfoStore} from "../stores/modules/commonInfo";
import {checkOrderPicAPI, orderDetailsAPI, submitOrderAPI, uploadOrderIdAPI} from "../services/order";
import {BaseImgUrl, BaseURL} from "../utils/lshttp";
import {toAppletPage, toMiniAppOrderPage} from "../utils/utils";
const commonInfoStore = useCommonInfoStore()
import {useOrderInfoStore} from "../stores/modules/orderInfo";
const orderInfoStore = useOrderInfoStore()
import LszbgUniCountDown from "../components/LszbgUniCountDown.vue";
import {useUserInfoStore} from "../stores/modules/userInfo";
const userInfoStore = useUserInfoStore()
const userInfo = userInfoStore.userInfo
const { twoFixed } = useCommonInfoStore() // 使用commonInfoStore状态管理器
const newUser = ref() // 是否是新用户
const applet = ref(0)
const shop = ref() // 店铺信息
const activity_item = ref() // 当前活动信息
const sourceVal = ref() // 来源order来自订单tab，meOrder来自我的订单
const shopDetail = ref()
const orderDetail = ref()
const orderID = ref(0) // 店铺ID
const signUp = ref() // 只报名1, 领红包报名2, 进入店铺3
const orderNoVal = ref() // 订单号
const isUpdataBtn = ref(false) // 是否更新按钮
const isShowTipsBox = ref(false) // 首单提示是否显示

const submitData = ref({
  order_id: '',
  user_pay_img: '',
  user_order_img: '',
  user_comment_img: '',
  is_abnormal: 0,
  user_pay_order_no: '',
  user_pay_amount: '',
  user_pay_time: '',
  shop_name: '',
  text1: "",
  text2: "",
  comment_time: ''
})
const order_is_abnormal = ref(0)
const shop_is_abnormal = ref(0)
const comment_is_abnormal = ref(0)
const banner_imgs = ref([])
const showGetTip = ref()

const imgs1 = ref()
const imgs2 = ref()
const imgs3 = ref()
const elmurl1 = ref('') //订单路径
const elmurl2 = ref('') //评价路径
// 订单检传递数据变量
const orderData = ref({})
onLoad(async (options) => {
  console.log("orderDetail = ", options.source)
  // 店铺ID
  orderID.value = options.orderID
  // 获取订单来源
  if (options.source){
    sourceVal.value = options.source
  }
  if (userInfoStore.isNewUser){
    newUser.value = "新用户"
    isShowTipsBox.value = true
  }else {
    newUser.value = "老用户"
    isShowTipsBox. value = false
  }
  // 只报名1, 领红包报名2
  if (options.signUp){
    signUp.value = Number(options.signUp)
  }
  if (options.orderID) {
    await handleShopDetail(options.orderID)
  }
  if (options.backData){
    orderData.value = JSON.parse(decodeURIComponent(options.backData))
    imgs1.value = orderData.value.path
    imgs2.value = orderData.value.path
  }
  // 获取设备信息
  const deviceInfo = uni.getSystemInfoSync()
  console.log('平台数据=', deviceInfo)
  if (deviceInfo.uniPlatform === 'app'){
    applet.value = 1
  } else if (deviceInfo.uniPlatform === 'mp-weixin'){
    applet.value = 2
  } else {
    applet.value = 3
  }
  console.log("orderID = ", orderID.value)
})
onShow(async () => {
  const addressDel = commonInfoStore.addressDel
})
// 获取订单详情
const handleShopDetail = async (id) => {
  const addressDel = commonInfoStore.addressDel
  const res = await orderDetailsAPI(id, addressDel?.lat, addressDel?.lng)
  orderDetail.value = res.result
  activity_item.value = res.result.activity
  orderNoVal.value = res.result.submit_order_no
  console.log('订单详情=', res.result, "订单活动=",activity_item.value)
  if (orderDetail.value.shop.type === 1) { //跳转美团
    elmurl1.value = 'pages/orders/orders';
    elmurl2.value = 'sub_inner_pages/evaluate-list/evaluate-list';
  }
  if (orderDetail.value.shop.type === 2) { //跳转饿了么
    elmurl1.value = 'pages/orderlist/pages/index/index';
    elmurl2.value = 'ele-evaluate-order/pages/ele-evaluate-center/ele-evaluate-center?spm=a2ogi.24574003.undefined&startTime=1686740013208';
  }
  submitData.value.order_id = res.result.id
  submitData.value.user_comment_img = res.result.user_comment_img
  submitData.value.user_order_img = res.result.user_order_img
  submitData.value.user_pay_img = res.result.user_pay_img
  submitData.value.user_pay_time = res.result.user_pay_time
  submitData.value.user_pay_order_no = res.result.user_pay_order_no
  submitData.value.shop_name = res.result.shop_name
  submitData.value.user_pay_amount = res.result.user_pay_amount
  imgs1.value = res.result.user_pay_img
  imgs2.value = res.result.user_order_img
  imgs3.value = res.result.user_comment_img
  banner_imgs.value = [res.result.example_comment_img, res.result.example_order_img, res.result.example_pay_img]
}
// 取消上传某张图片
const handleCloseImg = async (status) => {
  if (status === 1) {
    imgs1.value = ''
    submitData.value.user_pay_order_no = ''
    submitData.value.user_pay_time = ''
    submitData.value.user_pay_img = ''
  }
  if (status === 2) {
    imgs2.value = ''
    submitData.value.shop_name = ''
    submitData.value.user_pay_amount = ''
    submitData.value.user_order_img = ''
  }
  if (status === 3) {
    imgs3.value = ''
    submitData.value.user_comment_img = ''
  }
}
const showImage = (imgPth) => {
  conUtils("showImage", imgPth)
  uni.previewImage({
    urls: imgPth,
  })
}
// 上传截图
const uploadImg = (type) => {
  conUtils("uploadImg", uploadImg)
  let imgList = []
  switch (type) {
    case 0:
      // 上传识别订单号和付款时间
      if (imgs1.value) {
        imgList.push(imgs1.value)
        showImage(imgList)
        return
      }
      break;
    case 1:
      // 上传店铺名和实付金额
      if (imgs2.value) {
        imgList.push(imgs2.value)
        showImage(imgList)
        return
      }
      break;
    case 2:
      // 上传评论
      if (imgs3.value) {
        imgList.push(imgs3.value)
        showImage(imgList)
        return
      }
      break;
  }
  uni.chooseImage({
    count: 1,
    // 默认9
    sizeType: ['original', 'compressed'],
    // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'],
    // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
      const tempFilePaths = res.tempFilePaths;
      uni.showLoading({
        title: '上传中'
      })
      uni.uploadFile({
        url: BaseURL + (type === 2 ? '/api/order/ocrFiveStarPraise' : '/api/order/upload'),
        method: 'POST',
        filePath: tempFilePaths[0],
        formData: {
          order_id: orderDetail.value.id
        },
        name: 'file',
        success(res1) {
          conUtils("res1", res1)
          let data = JSON.parse(res1.data)
          // 订单截图
          if (type === 0 || type === 1) {
            uni.showToast({title: data.msg, icon: "none"})
            if (type === 0) {
              imgs1.value = data.result.show_path
              submitData.value.user_pay_img = data.result.path
              submitData.value.text1 = data.result.text
            } else if (type === 1) {
              imgs2.value = data.result.show_path
              submitData.value.user_order_img = data.result.path
              submitData.value.text2 = data.result.text
            }
            if (data.result.pay_time) {
              submitData.value.user_pay_time = data.result.pay_time
            }
            if (data.result.order_no) {
              submitData.value.user_pay_order_no = data.result.order_no
            }
            if (data.result.shop_name) {
              submitData.value.shop_name = data.result.shop_name
            }
            if (data.result.pay_amount) {
              submitData.value.user_pay_amount = data.result.pay_amount
            }
          } else {
            // 评价截图
            imgs3.value = data.result?.show_path
            submitData.value.user_comment_img = data.result?.path
            submitData.value.comment_time = data.result?.comment_time
            if (data.status !== 1) {
              order_is_abnormal.value = 1
              uni.showModal({
                title: data.result.title,
                content: data.result.sub_title,
                confirmText: '图片无误',
                cancelText: '重新上传',
                success(request) {
                  if (request.cancel) {
                    imgs3.value = ''
                    submitData.value.user_comment_img = ''
                  }
                }
              })
            } else {
              uni.showToast({title: data.msg, icon: "none"})
            }
          }
        }, fail(e) {
          uni.showToast({title: "上传失败" + JSON.stringify(e), icon: "none"})
        }, complete() {
          uni.hideLoading()
        }
      })
    }
  });
}
// 提交凭证
const submitVoucherFun = async () => {
  if (order_is_abnormal.value || shop_is_abnormal.value || comment_is_abnormal.value) {
    submitData.value.is_abnormal = 1
  } else {
    submitData.value.is_abnormal = 0
  }
  if (orderDetail.value.check_status > 2) {
    if (!submitData.value.user_pay_order_no) {
      await uni.showToast({title: "识别失败，请输入订单号", icon: "none"})
      return
    }
    if (!submitData.value.user_pay_amount) {
      await uni.showToast({title: "识别失败，请输入实付金额", icon: "none"})
      return
    }
    if (!submitData.value.user_pay_img) {
      await uni.showToast({
        title: '请上传截图',
        icon: 'none'
      })
      return
    }
  }
  try {
    await checkOrderPicAPI(submitData.value)
  } catch (e) {
    uni.showModal({
      title: e.data.result.title,
      content: e.data.result.sub_title + "，如果您上传的图片无误，请点击继续上传！",
      confirmText: '继续上传',
      cancelText: '我再看看',
      success(request) {
        submitData.value.is_abnormal = 1
        if (request.confirm) {
          submit()
        }
      }
    })
    return
  }
  orderInfoStore.setIsRefresh(true)
  uni.showToast({
    title: '上传成功====',
    icon: 'none',
    duration: 2600,
    mask: true,
    success: function () {
      console.log('success', sourceVal.value)
      setTimeout(function () {
        if (sourceVal.value == 'order'){
          uni.switchTab( {
            url: '/pages/order/order'
          })
        }else if (sourceVal.value == 'meOrder'){
          uni.navigateTo( {
            url: '/pages_order/me_order'
          })
        }

      }, 2600);
    }
  });
}
const submit = async () => {
  await submitOrderAPI(submitData.value).then((res) => {
    orderInfoStore.setIsRefresh(true)
    uni.showToast({
      title: '上传成功',
      icon: 'none',
      duration: 2600,
      mask: true,
      success: function () {
        setTimeout(function () {
          uni.switchTab( {
            url: '/pages/order/order'
          })
          // uni.navigateBack();
        }, 2600);
      }
    });
  }).catch((err) => {
    uni.showToast({
      title: err.msg,
      icon: 'none',
      duration: 2600,
      mask: true,
    });
  })

}

const mtOrderUrl = 'pages/orders/orders'
const mtEvaluateUrl = 'sub_inner_pages/evaluate-list/evaluate-list'
const mtAppletId = 'wx2c348cf579062e56'
const mtAppId = 'gh_72a4eb2d4324'
const elmOrderUrl = 'pages/orderlist/pages/index/index'
const elmEvaluateUrl = 'ele-evaluate-order/pages/ele-evaluate-center/ele-evaluate-center.html?spm=a2ogi.24574003.undefined&startTime=1701940975746'
const elmAppletId = 'wxece3a9a4c82f58c9'
const elmAppId = 'gh_6506303a12bb'
const jdOrderUrl = 'pages/order/list/index'
const jdEvaluateUrl = 'pages/order/list/index'
const jdAppletId = 'wx91d27dbf599dff74'
const jdAppId = 'gh_45b306365c3d'

const jietu = (type) => {
  /* if (orderDetail.value.shop.type === 3 && type !== 1) {
    showGetTip.value = true
    return
  } */
  toAppletPage(orderDetail.value.shop.type, type)
}
const previewImage = (e) => {
  const current = e.currentTarget.dataset.src;
  uni.previewImage({
    current: current,
    // 当前显示图片的http链接
    urls: banner_imgs.value // 需要预览的图片http链接列表
  });
}

//跳转教程
const goTutorial = () => {
  uni.navigateTo( {
    url: '/pages_shopdetail/shop_screenshot_tutorial?orderId=' + orderDetail.value.id + '&type=all'
  })
}
// 订单凭证示例
const orderTutorialFun = () => {
  uni.navigateTo( {
    url: '/pages_shopdetail/shop_screenshot_tutorial?orderId=' + orderDetail.value.id + '&type=order'
  })
}
// 评价截图示例
const evaluateTutorialFun = () => {
  uni.navigateTo( {
    url: '/pages_shopdetail/shop_screenshot_tutorial?orderId=' + orderDetail.value.id + '&type=evaluate'
  })
}



//倒计时计算
const format = ref("HH:mm:ss")
const findcountdownThere = (item) => {
  let nowTime = +new Date()
  let putTime = +new Date(item.end_time.replace(/-/g, "/"))
  return (putTime - nowTime)
}
const timeData = ref({
  hours: 0,
  minutes: 0,
  seconds: 0
})
const onTimeChange = (e) => {
  timeData.value.hours = e.hours
  timeData.value.minutes = e.minutes
  timeData.value.seconds = e.seconds
}

const scHeight = ref(0)
onPageScroll((e) => {
  scHeight.value = e.scrollTop
  // console.log('滚动距离==', e.scrollTop)
})
// 返回上个页面
const okBack = () => {
  console.log('来源=', sourceVal.value)
  if (sourceVal.value == 'order'){
    uni.switchTab( {
      url: '/pages/order/order'
    })
  } else if (sourceVal.value == 'meOrder'){
    uni.navigateTo( {
      url: '/pages_order/me_order'
    })
  }
}
// 前往APP、人工通道按钮隐藏
const isShowUploadChannel = ref(true)
// 前往人工上传截图显示
const isShowScreenshot = ref(false)
// 提交凭证按钮显示
const isShowScreenshotBtn = ref(false)
// 继续人工通道
const toManualScreenshot = () => {
  // 前往APP、人工通道按钮隐藏
  isShowUploadChannel.value = false
  // 人工上传截图显示
  isShowScreenshot.value = true
  // 提交凭证按钮显示
  isShowScreenshotBtn.value = true
}
// 前往APP上传截图
const toAPPScreenshot = () => {
  uni.navigateTo( {
    url: "/pages/tipdownload/tipdownload"
  })
}
// 是否显示修改订单号弹窗
const isShowOrderNo = ref(false)
// 修改订单号事件
const confirmOrderNoFun = async () => {
  console.log('修改订单号==', orderNoVal.value)
  isShowOrderNo.value = false
  // 判断平台订单号的位数是否正确
  if (orderDetail.value.shop.type === 1 || orderDetail.value.shop.type === 2){
    // 清除订单号空格
    if (orderNoVal.value.indexOf(' ') != -1) {
      orderNoVal.value = orderNoVal.value.replace(/\s*/g, '')
    }
    // 美团和饿了么订单号
    if (orderNoVal.value.length < 18 || orderNoVal.value.length > 20){
      uni.showToast( {
        title: '请输入18-20位外卖订单号',
        icon: 'none',
        duration: 1500
      })
      return
    }
  } else if (orderDetail.value.shop.type === 3) {
    // 清除订单号空格
    if (orderNoVal.value.indexOf(' ') != -1) {
      orderNoVal.value = orderNoVal.value.replace(/\s*/g, '')
    }
    // 京东订单号
    if (orderNoVal.value.length < 12 || orderNoVal.value.length > 14){
      uni.showToast( {
        title: '请输入12-14位外卖订单号',
        icon: 'none',
        duration: 1500
      })
      return
    }
    console.log('orderNoVal.value==',orderNoVal.value)
  }
  const res = await uploadOrderIdAPI(orderDetail.value.id, orderNoVal.value)
  if (res.code == 200){
    uni.showToast({
      title: '修改成功',
      icon: 'none',
      duration: 1000,
      mask: true,
      success: function () {
        setTimeout(function () {

        })
      }
    })
  }
}
// 跳转平台复制订单号
const orderNoCopy = async (type) => {
  await toMiniAppOrderPage(type)
}
// 组件卸载前跳转订单页面，避免重复返回店铺详情后自动跳转到当前页面
/* onBeforeUnmount(() => {
  console.log("页面销毁前==跳转订单页面==")
  uni.reLaunch({url: '/pages/order/order'});
}) */


</script>

<template>
  <view class="shop_process_box">
    <view class="shop_detail_bg"></view>
    <u-navbar
        title="上传凭证"
        placeholder
        titleStyle="color:#ffffff"
        :bgColor="scHeight>1 ? '#FEAD24' : 'transparent'"
    >
      <template #left>
        <view class="content" @click="okBack">
          <u-icon name="arrow-left" color="#FFFFFF" size="20"></u-icon>
        </view>
      </template>

      <!-- #ifdef APP-PLUS || H5 -->
      <!--<template #right>
        <view class="top_share_box" style="padding: 10rpx" @click="share" >
          <view class="tishi_box"><text class="tishi_text">分享奖8元</text><view class="sjx"></view></view>
          <u-icon class="share_icon" :name="currentIcon" size="26" color="#0CBB2F"></u-icon>
        </view>
      </template>-->
      <!-- #endif -->
    </u-navbar>
    <view class="shop_process_content">
      <scroll-view scroll-y="true">
        <!-- 店铺信息 -->
        <view class="shops_list" v-if="orderDetail?.shop_name">
          <view class="shop_list_item">
            <view class="shop_info">
              <view class="shop_mingzi">
                <view class="shop_name">{{ orderDetail?.shop_name }}</view>
                <view class="shop_addres">{{ orderDetail.shop.address }}  |  距你{{ (orderDetail.distance/1000).toFixed(3) }}km</view>
              </view>
            </view>
            <view style="position: relative">
              <image v-if="orderDetail.shop?.logo" :src="orderDetail.shop.logo" style="background-color: #F6F6F6;width: 130rpx;height: 130rpx;border-radius: 20rpx;margin-left: 20rpx;"></image>
              <image v-else
                     src="https://img.alicdn.com/imgextra/i3/3829152210/O1CN01gKAL671SCE3PjsESI_!!3829152210.png"
                     style="border-radius: 20rpx;width: 130rpx;height: 130rpx;"></image>
              <view class="pt_hot" v-if="orderDetail.is_hot===1">
                <text class="pt_hot_text">品质</text>
              </view>
              <view class="pt_hot" v-if="orderDetail.is_new_shop === 1 && orderDetail.is_hot === 0">
                <text class="pt_hot_text">新店</text>
              </view>
            </view>
          </view>
          <view class="shop_list_info">
            <view class="shop_list_info_warp" style="position: relative">
              <!--气泡提示盒子-->
              <view v-if="newUser == '新用户' && isShowTipsBox" @click="isShowTipsBox = false" class="tips_box">
                <view class="tips_icons">
                  <image :src="BaseImgUrl + '/shop/shopdetail/sjx_top_icon.png'" mode="widthFix" style="width: 24rpx;height: 24rpx;"></image>
                </view>
                <view class="tips_text_box">
                  <view class="tips_text">
                    <view class="tips_text_title">首单实付满<text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) }}</text>返<text style="color: #fd7c22;padding: 0 4rpx;">{{ userInfo.is_member === 0 ? twoFixed(activity_item.rebate_amount) : twoFixed(activity_item.member_rebate_amount) }}</text>后，再得</view>
                    <view v-if="userInfo.is_member === 0">
                      <text v-if="twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) > 3"><text style="color: #fd7c22;padding: 0 4rpx;">3元</text>奖励加<text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) -3 }}</text>元无门槛红包</text>
                      <text v-else><text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) }}元</text>奖励</text>
                    </view>
                    <view v-if="userInfo.is_member === 1">
                      <text v-if="twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) > 3"><text style="color: #fd7c22;padding: 0 4rpx;">3元</text>奖励加<text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) -3 }}元</text>无门槛红包</text>
                      <text v-else><text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) }}元</text>奖励</text>
                    </view>
                  </view>
                  <view class="tips_text_close"><u-icon name="close" color="#ffffff" size="18"></u-icon></view>
                </view>
              </view>
              <view v-if="newUser == '新用户'" style="display: flex;align-items: center;">
                <view class="shop_type">新人全额返</view>
                <view class="place_text">满{{ twoFixed(activity_item.minimum_amount) }}返{{ twoFixed(activity_item.minimum_amount) }}</view>
              </view>
              <view v-if="newUser == '老用户'" style="display: flex;align-items: center;">
                <view class="shop_type">返</view>
                <view v-if="userInfo.is_member === 0" class="place_text">满{{ twoFixed(activity_item.minimum_amount) }}返{{ twoFixed(activity_item.rebate_amount) }}</view>
                <view v-if="userInfo.is_member === 1" class="place_text">满{{ twoFixed(activity_item.minimum_amount) }}返{{ twoFixed(activity_item.member_rebate_amount) }}</view>
              </view>
              <!--<view v-if="activity_item.comment_type === 1" class="shop_info_warp_type" style="">品鉴星级</view>-->
              <view v-if="activity_item.is_comment === 2" class="activityNum_evaluate" style="">无需评价</view>
              <view v-if="activity_item.comment_type === 3" class="shop_info_warp_type" style="">图文品鉴</view>
              <view v-if="activity_item.comment_type === 4" class="shop_info_warp_type" style="">文字品鉴</view>
            </view>
          </view>
          <view class="count_down_box">
            <view class="shop_list_info_text">请在</view>
            <!--倒计时 @change="onTimeChange"-->
            <LszbgUniCountDown
                :timeItem="orderDetail.end_time"
                :isDay="false"
                :isHour="true"
                :isMinute="true"
                :isSecond="true"
                :timeStyle="{background: '#FF7900',color: '#FFFFFF', fontSize: 12}"
            >
            </LszbgUniCountDown>
            <view class="shop_list_info_text">内提交外卖凭证</view>
          </view>

        </view>
        <!-- 订单流程 -->
        <view class="shop_process_wrap">
          <view class="shop_process_wrap_bg"><image :src="BaseImgUrl + '/shop/process/process_bg01.png'" style="width: 100%;height: 260rpx;"></image></view>
          <view class="shop_process_wrap_box" style="position: relative;z-index: 2">
            <view class="shop_process_wrap_title"><image :src="BaseImgUrl + '/shop/process/process_title01.png'" mode="heightFix" style="width: 186rpx;height: 40rpx;"></image></view>
            <view class="shop_process_wrap_content">
              <view class="process_wrap_top">
                <view class="process_wrap_top_img">
                  <image v-if="orderDetail?.shop.type === 1" :src="BaseImgUrl + '/shop/process/process_meituan.png'" mode="widthFix" style="width: 68rpx;height: 68rpx"></image>
                  <image v-if="orderDetail?.shop.type === 2" :src="BaseImgUrl + '/shop/process/process_elm.png'" mode="widthFix" style="width: 68rpx;height: 68rpx"></image>
                  <image v-if="orderDetail?.shop.type === 3" :src="BaseImgUrl + '/shop/process/process_jd.png'" mode="widthFix" style="width: 68rpx;height: 68rpx"></image>
                </view>
                <view class="process_wrap_line process_wrap_line_active"></view>
                <view class="process_wrap_top_img">
                  <image :src="BaseImgUrl + '/shop/process/process_lingshi.png'" mode="widthFix" style="width: 68rpx;height: 68rpx"></image>
                </view>
                <view class="process_wrap_line"></view>
                <view class="process_wrap_top_img">
                  <image :src="BaseImgUrl + '/shop/process/process_money.png'" mode="widthFix" style="width: 68rpx;height: 68rpx"></image>
                </view>
              </view>
              <view class="process_wrap_bottom">
                <view class="shop_process_wrap_content_item item_left">
                  <view class="shop_process_wrap_content_item_title">{{ orderDetail?.shop.type == 1 ? '美团点外卖' : orderDetail?.shop.type == 2 ? '饿了么点外卖' : '京东点外卖' }}</view>
                  <view class="shop_process_wrap_content_item_text">回领食填单号</view>
                </view>
                <view class="shop_process_wrap_content_item item_center">
                  <view class="shop_process_wrap_content_item_title">收到外卖后</view>
                  <view class="shop_process_wrap_content_item_text">上传完成截图</view>
                </view>
                <view class="shop_process_wrap_content_item item_right">
                  <view class="shop_process_wrap_content_item_title">返现到账</view>
                  <view class="shop_process_wrap_content_item_text">微信秒打款</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!--首单返利提示-->
        <view v-if="newUser == '新用户' && isShowTipsBox" class="shop_first_tip">
          <view class="shop_process_tip_content">
            <view class="shop_first_img">
              <image :src="BaseImgUrl + '/order/red_icon01.png'" style="width: 32rpx;height: 36rpx;padding-right: 10rpx;"></image>
              <image :src="BaseImgUrl + '/order/free_icon.png'" style="width: 100rpx;height: 34rpx;padding-right: 10rpx;"></image>
            </view>
            <view class="shop_first_text_box">
              <text class="tips_text_title">首单实付满<text style="color: #F83123;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) }}</text>返<text style="color: #F83123;padding: 0 4rpx;">{{ userInfo.is_member === 0 ? twoFixed(activity_item.rebate_amount) : twoFixed(activity_item.member_rebate_amount) }}</text>后，再得</text>
              <text v-if="userInfo.is_member === 0">
                <text v-if="twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) > 3"><text style="color: #F83123;padding: 0 4rpx;">3元</text>奖励加<text style="color: #F83123;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) -3 }}</text>元无门槛红包</text>
                <text v-else><text style="color: #F83123;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) }}元</text>奖励</text>
              </text>
              <text v-if="userInfo.is_member === 1">
                <text v-if="twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) > 3"><text style="color: #F83123;padding: 0 4rpx;">3元</text>奖励加<text style="color: #F83123;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) -3 }}元</text>无门槛红包</text>
                <text v-else><text style="color: #F83123;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) }}元</text>奖励</text>
              </text>
            </view>
          </view>
        </view>
        <!--活动提示-->
        <view class="shop_process_tip">
          <view class="shop_process_tip_content">
            <image :src="BaseImgUrl + '/shop/process/process_icon04.png'"  style="width: 44rpx;height: 44rpx;padding-right: 10rpx;"></image>
            <view class="tip_text">
              <view v-if="activity_item?.is_comment === 2" class="tip_text_scroll">
                <text style="white-space: nowrap">本活动</text>
                <text style="color: #FF7900;white-space: nowrap">无需评价</text>
                <text style="white-space: nowrap">，提交订单审核即可，禁止评价否则无法获得返利。</text>
              </view>
              <view v-else class="tip_text_scroll">
                <text style="white-space: nowrap">本活动需要上传</text>
                <text style="color: #FF7900;display: inline-block">{{ activity_item?.activity_ask }}</text>
                <text style="white-space: nowrap">凭证，否则无法参与活动返利。</text>
              </view>
            </view>
          </view>
        </view>
        <!--上传截图内容-->
        <view v-if="isShowScreenshot" class="shop_process_screenshot">
          <!--上传外卖订单凭证-->
          <view class="voucher_cont" >
            <!-- 订单凭证 -->
            <view v-if="orderDetail?.check_status > 2" class="orderVoucher">
              <view class="qujietu">
                <view style="font-size: 28rpx;color: #3D3D3D;display: flex;align-items: center">
                  <image :src="BaseImgUrl + '/shop/process/process_icon05.png'" mode="widthFix" style="width: 30rpx;"></image>
                  <text style="padding-left: 10rpx;">上传外卖订单凭证截图</text>
                </view>
                <view @tap="jietu(1)" style="text-align: center;position: relative">
                  <!-- #ifdef H5 -->
                  <wx-open-launch-weapp id="launch-btn"
                                        :username="orderDetail?.shop.type == 1 ? mtAppId : orderDetail?.shop.type == 2 ? elmAppId : jdAppId"
                                        :path="orderDetail?.shop.type == 1 ? mtOrderUrl : orderDetail?.shop.type == 2 ? elmOrderUrl : jdOrderUrl"
                                        style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
                    <component :is="'script'" type='text/wxtag-template' style="display: block;">
                      <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
                    </component>
                  </wx-open-launch-weapp>
                  <!-- #endif -->
                  <view class="btn-open-weapp">
                    <image v-if="orderDetail?.shop.type === 1" :src="BaseImgUrl + '/shop/process/shop_meituan.png'" mode="widthFix" style="width: 40rpx;"></image>
                    <image v-if="orderDetail?.shop.type === 2" :src="BaseImgUrl + '/shop/process/shop_elm.png'" mode="widthFix" style="width: 40rpx;"></image>
                    <image v-if="orderDetail?.shop.type === 3" :src="BaseImgUrl + '/shop/process/shop_jd.png'" mode="widthFix" style="width: 40rpx;"></image>
                    <text style="padding-left: 10rpx;">去截图</text>
                  </view>
                </view>
              </view>
              <view class="notes">请按照提示框正确上传</view>
              <view class="notesImg">
                <view class="imgs_box">
                  <view class="small_box">
                    <view @tap="uploadImg(0)" style="height: 100%">
                      <image v-if="!imgs1" :src="BaseImgUrl + '/shop/process/process_icon07.png'" mode="widthFix" style="width: 56rpx;"></image>
                      <view v-if="!imgs1" class="small_box_text">上传订单号和下单时间截图</view>
                      <view v-if="imgs1" class="upload_img"><image :src="imgs1" mode="widthFix" style="width: 100%;"></image></view>
                    </view>
                    <view class="close_icon" v-if="imgs1" @click="handleCloseImg(1)">
                      <image :src="BaseImgUrl + '/images/close.png'"></image>
                    </view>
                  </view>
                  <view class="small_box">
                    <view @tap="uploadImg(1)" style="height: 100%">
                      <image v-if="!imgs2" :src="BaseImgUrl + '/shop/process/process_icon07.png'" mode="widthFix" style="width: 56rpx;"></image>
                      <view v-if="!imgs2" class="small_box_text">上传店铺名和实付金额截图</view>
                      <view v-if="imgs2" class="upload_img"><image :src="imgs2" mode="widthFix" style="width: 100%;"></image></view>
                    </view>
                    <view class="close_icon" v-if="imgs2" @click="handleCloseImg(2)">
                      <image :src="BaseImgUrl + '/images/close.png'"></image>
                    </view>
                  </view>
                  <view @tap="orderTutorialFun" class="small_case">
                    <view class="small_case_tip">示例</view>
                    <view class="small_case_text">上传<text style="color: #FF7900;">凭证</text></view>
                    <view class="small_case_text">截图教程</view>
                    <view class="small_case_img"><image :src="BaseImgUrl + '/shop/process/process_icon08.png'" mode="widthFix" style="width: 80rpx;"></image></view>
                  </view>
                </view>
              </view>

            </view>
            <!-- 评价截图 -->
            <view v-if="orderDetail?.activity.is_comment === 1" class="appraise">
              <view class="qujietu">
                <view style="font-size: 28rpx;color: #3D3D3D;display: flex;align-items: center">
                  <image :src="BaseImgUrl + '/shop/process/process_icon06.png'" mode="widthFix" style="width: 30rpx;"></image>
                  <text style="padding-left: 10rpx;">上传评价截图</text>
                </view>
                <view @tap="jietu(2)" style="text-align: center;">
                  <!-- #ifdef H5 -->
                  <wx-open-launch-weapp id="launch-btn"
                                        :username="orderDetail.shop.type == 1 ? mtAppId : orderDetail.shop.type == 2 ? elmAppId : jdAppId"
                                        :path="orderDetail.shop.type == 1 ? mtEvaluateUrl : orderDetail.shop.type == 2 ? elmEvaluateUrl : jdEvaluateUrl"
                                        style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity:0.01;background-color: #ff531a">
                    <component :is="'script'" type='text/wxtag-template' style="display: block;">
                      <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
                    </component>
                  </wx-open-launch-weapp>
                  <!-- #endif -->
                  <view class="btn-open-weapp">
                    <image v-if="orderDetail?.shop.type === 1" :src="BaseImgUrl + '/shop/process/shop_meituan.png'" mode="widthFix" style="width: 40rpx;"></image>
                    <image v-if="orderDetail?.shop.type === 2" :src="BaseImgUrl + '/shop/process/shop_elm.png'" mode="widthFix" style="width: 40rpx;"></image>
                    <image v-if="orderDetail?.shop.type === 3" :src="BaseImgUrl + '/shop/process/shop_jd.png'" mode="widthFix" style="width: 40rpx;"></image>
                    <text style="padding-left: 10rpx;">去截图</text>
                  </view>
                </view>
              </view>

              <!--<view class="notes" style="margin-top: 10rpx">注：{{ orderDetail?.shop_activity_ask }}</view>-->
              <view class="notesImg">
                <view class="small_box">
                  <view @tap="uploadImg(2)" style="height: 100%">
                    <image  v-if="!imgs3" :src="BaseImgUrl + '/shop/process/process_icon07.png'" mode="widthFix" style="width: 48rpx;"></image>
                    <view v-if="!imgs3" class="small_box_text">上传评价截图</view>
                    <view v-if="imgs3" class="upload_img"><image :src="imgs3" mode="widthFix" style="width: 100%;"></image></view>
                  </view>
                  <view class="close_icon" v-if="imgs3" @click="handleCloseImg(3)">
                    <image :src="BaseImgUrl + '/images/close.png'"></image>
                  </view>
                </view>
                <view @tap="evaluateTutorialFun" class="small_case">
                  <view class="small_case_tip">示例</view>
                  <view class="small_case_text">上传<text style="color: #FF7900;">凭证</text></view>
                  <view class="small_case_text">截图教程</view>
                  <view class="small_case_img"><image :src="BaseImgUrl + '/shop/process/process_icon08.png'" mode="widthFix" style="width: 80rpx;"></image></view>
                </view>
              </view>
            </view>
          </view>
          <!--自动识别订单号和金额-->
          <view v-if="orderDetail?.check_status > 2" class="voucher_cont" >
            <view class="voucher_list">
              <text>订单编号：</text>
              <input type="text" name="order_sn" v-model="submitData.user_pay_order_no"
                     placeholder="订单号上传图片后自动识别"
                     placeholder-class="classVoucher">
            </view>
            <view class="voucher_list">
              <text>支付金额：</text>
              <input type="text" name="pay_num" v-model="submitData.user_pay_amount"
                     placeholder="请输入支付金额: 支付金额上传图片后自动识别"
                     placeholder-class="classVoucher">
            </view>
          </view>
        </view>
        <!--选择上传通道 -->
        <view v-if="isShowUploadChannel" class="shop_upload_channel">
          <view class="shop_upload_channel_content">
            <view v-if="orderDetail?.check_status === 3 || orderDetail?.check_status === 4" class="closeCircle">
              <u-icon name="close-circle-fill" size="56" color="#FF7900"></u-icon>
            </view>
            <view v-if="orderDetail?.check_status === 1 || orderDetail?.check_status === 2 || orderDetail?.check_status === 5" class="checkmarkCircle"><u-icon name="checkmark-circle-fill" size="56" color="#13BF69"></u-icon></view>
            <view  class="shop_process_takeout_text">外卖已收到，请上传任务截图，领取返利</view>
            <view class="shop_process_takeout_ipt">
              <view class="shop_process_takeout_ipt_l">
                <text style="color: #3D3D3D;">订单号：</text>
                <text style="color: #FE7B20;font-size: 28rpx;">{{ orderNoVal }}</text>
              </view>
              <view @click="isShowOrderNo = true" class="shop_process_takeout_ipt_r">
                <u-icon name="edit-pen" size="24" color="#888888" ></u-icon>
                <text>修改</text>
              </view>
            </view>
          </view>
        </view>
        <!--填充底部按钮空白-->
        <view v-if="isShowScreenshotBtn" class="fill_blank" style="height: 120rpx;"></view>
        <!--前往APP、人工通道按钮 -->
        <view v-if="isShowUploadChannel" class="shop_process_update_btn">
          <view @click="toAPPScreenshot" class="shop_process_update_btn_text APPScreenshot">
            <view>前往APP上传截图</view>
            <view class="APPScreenshot_img"><image :src="BaseImgUrl + '/shop/process/APPScreenshot_img01.png'" mode="widthFix" style="width: 120rpx;"></image></view>
          </view>
          <view @click="toManualScreenshot" class="shop_process_update_btn_text ManualScreenshot">
            <view style="font-size: 28rpx;color: #333333;">继续通过人工通道上传</view>
            <view style="font-size: 22rpx;color: #666666;">（审核需6-12小时）</view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!--提交凭证按钮-->
    <view v-if="isShowScreenshotBtn" class="shop_process_takeout_btn">
      <view @click="submitVoucherFun" class="shop_process_takeout_btn_text">提交凭证，获得返利</view>
    </view>
    <!--教程浮动按钮-->
    <view v-if="isShowScreenshotBtn" @tap="goTutorial" class="shop_process_screenshot_tutorial">
      <view class="tutorial_box">
        <image :src="BaseImgUrl + '/shop/process/process_icon09.png'" mode="widthFix" style="width: 30rpx;"></image>
        <view style="font-size: 20rpx;color: #333333;">教程</view>
      </view>
    </view>
  </view>

  <!--修改订单号弹窗-->
  <u-popup :show="isShowOrderNo" mode="center" round="12" :closeable="true" @close="isShowOrderNo = false" :customStyle="{width: '90%',height: '380rpx'}">
    <view class="orderNo_edit_box">
      <view class="orderNo_edit_box_content">
        <view class="orderNo_edit_box_title">修改订单号</view>
        <!--<view style="margin: 20rpx 0;"><u-line color="#E5E5E5"></u-line></view>-->
        <view class="orderNo_edit_box_warp">
          <view class="orderNo_edit_box_warp_inp">
            <text style="color: #3D3D3D;">订单号：</text>
            <u-input
                placeholder="输入或粘贴外卖订单编号"
                border="none"
                v-model="orderNoVal"
            ></u-input>
            <view @click="orderNoCopy(orderDetail.shop.type)" class="choice_right">去复制</view>
          </view>
        </view>
        <view class="orderNo_edit_box_btn">
          <view @click="confirmOrderNoFun">确认修改</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<style lang="scss">
page{
  width: 100%;
  height: 100%;
  background-color: #F4F4F4;
}
.shop_process_box{
  position: relative;
  width: 100%;
  height: 100%;
  .shop_process_content{
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
  }
}
.shop_detail_bg{
  height: 650rpx;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // z-index: -1;
  background:linear-gradient( 180deg, #FEAD24 0%, rgba(253,124,30,0) 100%);
}
/* 店铺信息 */
.shops_list {
  width: 93%;
  margin: 20rpx auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  z-index: 9;
  position: relative;

  .shifupeisong {
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;
    color: #666;
    font-size: 24rpx;

    .icons_box {
      display: flex;
      justify-content: space-between;

      view {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .copy_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 44rpx;
          height: 44rpx;
          background: url('https://lsz.lszbg.com/imgs/old/copy_icon.png') no-repeat center center / 100% 100%;
          margin-right: 5rpx;
        }
      }

      .ps_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 36rpx;
          height: 36rpx;
          background: url('https://lsz.lszbg.com/imgs/old/ps_icon.png') no-repeat center center / 100% 100%;
          margin-right: 10rpx;
        }
      }

      .sb_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 36rpx;
          height: 36rpx;
          background: url('https://lsz.lszbg.com/imgs/old/sb_icon.png') no-repeat center center / 100% 100%;
          margin-right: 10rpx;
        }
      }

      .sb_icon {
        &:before {
          content: '';
          display: inline-block;
          height: 30rpx;
          position: relative;
          top: -5rpx;
        }
      }
    }
  }

  .pijiangonggao {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;

    image {
      width: 45rpx;
      margin-right: 15rpx;
    }

    view {
      color: #999;
    }
  }

  .shop_dizhi {
    display: flex;
    align-items: flex-start;
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;

    image {
      width: 56rpx;
      margin-right: 15rpx;
    }

    view {
      color: #999;
    }
  }

  .manjian_box {
    display: flex;
    align-items: center;
    padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 10rpx) 30rpx;
    border-top: 1px solid #EEEEEE;
    font-size: 24rpx;

    .man_tag {
      background-color: #F97632;
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #ffffff;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
    }

    view {
      margin-right: 20rpx;
    }

    text {
      color: #FF6433;
    }
  }

  .shop_list_item {
    background-color: #ffffff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 20rpx 20rpx 0;
    display: flex;
    align-items: flex-start;

    .shop_info {
      flex: 1;
      padding-left: 20rpx;
      .shop_name {
        line-height: 44rpx;
        font-size: 32rpx;
        color: #333333;
        padding: 10rpx 0;
        font-weight: bold;
        flex: 1;
      }
      .shop_addres{
        font-size: 24rpx;
        color: #888888;
        line-height: 32rpx;
      }
      .adress_shop {
        display: flex;
        margin-top: 20rpx;

        .place_text {
          font-size: 26rpx;
          color: #888;
          flex: 1;
          margin-left: 10rpx;
          line-height: 44rpx;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 这里是超出几行省略 */
          overflow: hidden;
        }

        .shop_type {
          display: inline-block;
          background-color: #FECC32;
          color: #333333;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 2rpx 10rpx;
          position: relative;
          top: 4rpx;
          height: 36rpx;
        }

        .shop_type3 {
          background-color: #db2727;
          color: #FFFFFF;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 0 6rpx;
          height: 36rpx;
          line-height: 36rpx;
        }

        .elemtag {
          background-color: #17aeff;
          color: #ffffff;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 2rpx 10rpx;
          position: relative;
          top: 4rpx;
          height: 36rpx;
        }
      }


      .yysjandejuli_box {
        display: flex;
        align-items: center;
        margin: 24rpx 0 0 0;
        font-size: 24rpx;

        .yysj_text {
          background-color: #f1f1f1;
          border-radius: 8rpx;
          padding: 10rpx 6rpx;
          font-size: 20rpx;
          text-align: center;
        }

        .shop_juli {
          color: #555555;
          padding-left: 20rpx;
          font-size: 24rpx;
        }
      }

      .shop_yuliang {
        display: flex;
        align-items: center;

        .jindutiao {
          flex: 1;
        }

        .shengyu {
          padding-left: 20rpx;
          color: #FF6433;
          font-size: 24rpx;
        }
      }
    }
  }

  .shop_list_info{
    padding: 0 30rpx;
    margin-bottom: 10rpx;
    .shop_mingzi {
      margin-bottom: 20rpx;

      .shop_addres{
        font-size: 24rpx;
        color: #888888;
        line-height: 32rpx;
        text-align: left;
      }
    }
    .shop_list_info_warp{
      height: 60rpx;
      display: flex;
      align-items: center;
      .shop_info_warp_type{
        padding: 0 10rpx;
        height: 36rpx;
        line-height: 36rpx;
        font-size: 22rpx;
        color: #FF4444;
        border: 2rpx solid #FF4444;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 10rpx;
      }
      .activityNum_evaluate{
        height: 36rpx;
        line-height: 36rpx;
        font-size: 22rpx;
        color: #2DB327;
        text-align: center;
        padding: 0 10rpx;
        background: #F5FFF5;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #74D87F;
        margin-left: 10rpx;
      }
      .shop_type{
        background: #FD7C22;
        color: #FFFFFF;
        font-size: 24rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        padding: 0 10rpx;
        border-radius: 6rpx 0 0 6rpx;
      }
      .place_text{
        height: 36rpx;
        line-height: 36rpx;
        padding: 0 10rpx;
        border: 2rpx solid #FD7C22;
        border-radius: 0 6rpx 6rpx 0;
        color: #FD7C22;
        font-size: 22rpx;
        text-align: center;
      }
      /* 气泡提示盒子css */
      .tips_box{
        width: 320rpx;
        position: absolute;
        top: 60rpx;
        left: 0;
        .tips_icons{
          position: absolute;
          left: 14rpx;
          top: -26rpx;
          opacity: 1;
        }
        .tips_text_box{
          padding: 10rpx 20rpx 10rpx 10rpx;
          background-color: rgba(0,0,0,1);
          color: #fff;
          font-size: 22rpx;
          border-radius: 18rpx;
          position: relative;
          .tips_text_title{
            line-height: 34rpx;
          }
          .tips_text_close{
            position: absolute;
            right: 2rpx;
            top: 2rpx;
          }
        }
      }
    }
  }
  /* 倒计时box */
  .count_down_box{
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 30rpx;
    background: #FFF4E6;
    border-radius: 0 0 20rpx 20rpx;
    display: flex;
    font-size: 24rpx;
    color: #666666;
    & .shop_list_info_text{
      padding-right: 8rpx;
    }

    & .uni-countdown{
      height: 60rpx;
      padding-right: 8rpx;
    }
  }
}

/* 下单流程css */
.shop_process_wrap{
  width: 93%;
  height: 260rpx;
  margin: 0 auto;
  border-radius: 20rpx;
  position: relative;
  .shop_process_wrap_bg{
    width: 100%;
    height: 260rpx;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    // z-index: -1;
    overflow: hidden;
  }
  .shop_process_wrap_title{
    height: 40rpx;
    padding: 20rpx 30rpx;
  }
  .shop_process_wrap_content{
    padding: 0 30rpx 20rpx;
    .process_wrap_top{
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      .process_wrap_top_img{
        width: 80rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .process_wrap_line{
        width: calc(50% - 105rpx);
        height: 12rpx;
        background: #E5E5E5;
      }
      .process_wrap_line_active{
        background: #FCB141;
      }
    }
    .process_wrap_bottom{
      display: flex;
      .shop_process_wrap_content_item{
        width: calc(100% / 3);
        .shop_process_wrap_content_item_title{
          font-size: 24rpx;
          color: #333333;
        }
        .shop_process_wrap_content_item_text{
          font-size: 22rpx;
          color: #666666;
        }
      }
      .item_left{
        text-align: left;
      }
      .item_right{
        text-align: right;
      }
      .item_center{
        text-align: center;
      }
    }
  }
}
/* 首单返利提示css */
.shop_first_tip{
  width: 93%;
  min-height: 64rpx;
  margin: 20rpx auto;
  border-radius: 16rpx;
  color: #666666;
  background: linear-gradient( 270deg, #FFFFFF 0%, #FFF1F1 100%);
  .shop_process_tip_content{
    display: flex;
    align-items: center;
    padding: 20rpx 8rpx;
    .shop_first_img{
      width: 160rpx;
    }
    .shop_first_text_box{
      flex: 1;
      color: #666666;
      font-size: 24rpx;
      border-radius: 10rpx;
      .tips_text_title{
        line-height: 34rpx;
      }
    }
  }
}
/* 提交订单号提示 */
.shop_process_tip{
  width: 93%;
  min-height: 64rpx;
  margin: 20rpx auto;
  border-radius: 16rpx;
  color: #666666;
  background: #FFFFFF;
  .shop_process_tip_content{
    /* min-height: 64rpx;
    line-height: 44rpx; */
    padding: 10rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    font-size: 24rpx;
    .tip_text{
      flex: 1;
      overflow: hidden;
      padding: 12rpx 0;
      line-height: 24rpx;
      .tip_text_scroll{
        white-space: nowrap;
        animation: scrollRightToLeft 10s linear infinite;
      }
    }
  }
  @keyframes scrollRightToLeft {
    from {
      transform: translateX(100%); /* 从右侧开始 */
    }
    to {
      transform: translateX(-100%); /* 向左侧滚动 */
    }
  }
}
/* 上传截图内容css */
.shop_process_screenshot{

}
/* 上传凭证css */
.voucher_cont {
  padding: 28rpx;
  box-sizing: border-box;
  margin: 20rpx;
  background: #fff;
  border-radius: 10px;
  .orderVoucher {
    overflow: hidden;
    position: relative;
    margin-bottom: 30rpx;
  }
}
.notes,
.appraise .notes {
  font-size: 26rpx;
  color: #FF7A00;
  padding: 20rpx;
  box-sizing: border-box;
  background: #FFF8E8;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.qujietu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 20rpx;
  .jietu_no{
    width: 40rpx;
    height: 40rpx;
  }
  /* view:nth-child(1) {
    font-size: 28rpx;
    color: #222;
    font-weight: bold;
    box-sizing: border-box;
  } */
  .btn-open-weapp{
    height: 34rpx;
    line-height: 34rpx;
    font-size: 24rpx;
    font-weight: normal;
    color: #888888;
    padding: 8rpx 12rpx;
    border: 2rpx solid #E4E4E4;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
  }
}
.notesImg {
  width: 100%;
  min-height: 130rpx;
  .imgs_box{
    display: flex;
    justify-content: left;
  }
}

.notesImg .small_box {
  width: 192rpx;
  height: 192rpx;
  padding: 20rpx;
  margin-right: 30rpx;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  background: #F8F8F8;
  border-radius: 16rpx;
  border: 2rpx dashed #E8E8E8;
  & .small_box_text{
    font-size: 24rpx;
    color: #888888;
    line-height: 40rpx;
  }
  & .text {
    font-size: 24rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: red;
  }

  & .close_icon {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    width: 30rpx;
    height: 30rpx;
    opacity: .7;
    background: #FFFFFF;
    border-radius: 50%;
    image {
      width: 100%;
      height: 100%;
    }
  }
  & .upload_img{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

.notesImg .small_box image {
  display: inline-block;
  width: 160rpx;
  height: 160rpx;
  border-radius: 10px;
}
/* 评价截图 */
.appraise {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10rpx;
  position: relative;
  background: #fff;
  border-radius: 25px;
  margin-bottom: 20px;
  .notesImg{
    display: flex;
    justify-content: left;
  }
}

/* 示例css */
.small_case{
  width: 192rpx;
  height: 192rpx;
  padding: 40rpx 20rpx;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  background: #FFF8E8;
  border-radius: 16rpx;
  border: 2rpx dashed #E8E8E8;
  & .small_case_text{
    font-size: 32rpx;
    font-weight: bold;
    color: #888888;
    line-height: 50rpx;
  }
  & .small_case_tip{
    width: 76rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    font-size: 24rpx;
    color: #FFFFFF;
    background: #FF7900;
    border-radius: 16rpx 0 16rpx 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  & .small_case_img{
    width: 80rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: calc(50% - 40rpx);
    top: calc(50% - 40rpx);
    z-index: 1;
  }
}
.appraiseImg image {
  width: 160rpx;
  height: 160rpx;
  margin: 0 20rpx 20rpx 0;
}
/* 上传凭证 */
.submint {
  margin: 27rpx auto;
  width: 690rpx !important;
  height: 80rpx;
  font-size: 32rpx;
  color: #fff;
  border-radius: 40rpx;
  background: linear-gradient(90deg, #fc605b, #fb9360);
}

.voucher_list {
  width: 100%;
  height: 100rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #ebeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.voucher_list:last-child {
  border-bottom: 0 solid #ebeaea;
}

.voucher_list text {
  //width: 30%;
  font-size: 28rpx;
  color: #3D3D3D;
}

.voucher_list input {
  flex: 1;
  height: 100%;
  padding: 0 10rpx;
  box-sizing: border-box;
  text-align: right;
  font-size: 28rpx;
}
/* 外卖已收到，选择上传通道css */
.shop_upload_channel{
  width: 93%;
  height: 400rpx;
  margin: 20rpx auto;
  border-radius: 16rpx;
  background: #FFFFFF;
  .shop_upload_channel_content{
    padding: 30rpx;

  }
  .closeCircle{
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
  }
  .checkmarkCircle{
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
  }
  .shop_process_takeout_text{
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
    padding: 10rpx 0;
    margin-bottom: 30rpx;
    text-align: center;
  }
  .shop_process_takeout_ipt{
    height: 72rpx;
    line-height: 72rpx;
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;
    background: #FFF9F1;
    border-radius: 8rpx;
    border: 2rpx solid #FFB878;
    .shop_process_takeout_ipt_l{
      font-size: 24rpx;
    }
    .shop_process_takeout_ipt_r{
      display: flex;
      font-size: 26rpx;
      color: #888888;
    }
  }
}
/* 选择上传凭证通道css */
.shop_process_update_btn{
  padding: 0 30rpx;
  margin-top: 80rpx;
  .shop_process_update_btn_text{
    font-size: 32rpx;
    color: #FFFFFF;
    text-align: center;
    border-radius: 50rpx;
  }
  .APPScreenshot{
    height: 88rpx;
    line-height: 88rpx;
    background: linear-gradient( 270deg, #FF8118 0%, #FF5429 100%);
    margin-bottom: 36rpx;
    position: relative;
    .APPScreenshot_img{
      position: absolute;
      top: -44rpx;
      right: 50rpx;
    }
  }
  .ManualScreenshot{
    height: 64rpx;
    line-height: 36rpx;
    background: rgba(255,255,255,0.3);
    border: 2rpx solid #D0D0D0;
    padding: 10rpx 0;
  }
}
/* 提交凭证按钮css */
.shop_process_takeout_btn{
  width: calc(100% - 60rpx);
  height: 80rpx;
  position: fixed;
  bottom: 0;
  z-index: 999;
  background: #FFFFFF;
  padding: 20rpx 30rpx env(safe-area-inset-bottom);
  box-shadow: 0 8rpx 20rpx 0 rgba(0,0,0,0.3);
  .shop_process_takeout_btn_text{
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #FFFFFF;
    text-align: center;
    background: linear-gradient( 270deg, #FF8118 0%, #FF5429 100%);
    border-radius: 50rpx;
    margin-bottom: 20rpx;
  }
}
/* 教程浮动按钮css */
.shop_process_screenshot_tutorial{
  width: 80rpx;
  height: 80rpx;
  position: fixed;
  right: 0;
  top: 50%;
  background: #FFFFFF;
  box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(0,0,0,0.1);
  border-radius: 50%;
  .tutorial_box{
    text-align: center;
    padding: 10rpx;
  }
}
/* 倒计时css */
.time {
  @include flex;
  align-items: center;
  padding: 0 10rpx;
  &__custom {
    width: 22px;
    height: 22px;
    background-color: #FF7900;
    border-radius: 4px;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;

    &__item {
      color: #fff;
      font-size: 12px;
      text-align: center;
    }
  }

  &__doc {
    color: #FF7900;
    padding: 0px 4px;
  }

  &__item {
    color: #606266;
    font-size: 15px;
    margin-right: 4px;
  }
}
/* 修改订单号弹窗css */
.orderNo_edit_box{
  padding: 20rpx;
  position: relative;
  .orderNo_edit_box_content{
    width: 100%;
    .orderNo_edit_box_title{
      line-height: 40rpx;
      font-size: 28rpx;
      color: #333333;
      text-align: center;
      padding: 30rpx 0;
    }
    .orderNo_edit_box_warp{
      padding-bottom: 50rpx;
      .orderNo_edit_box_warp_inp{
        display: flex;
        align-items: center;
        font-size: 28rpx;
        background: #FFF9F1;
        border-radius: 12rpx;
        border: 2rpx solid #FFB878;
        padding: 20rpx;
        .choice_right{
          width: 88rpx;
          height: 40rpx;
          font-size: 24rpx;
          color: #FFFFFF;
          line-height: 40rpx;
          text-align: center;
          background: linear-gradient( 270deg, #FFB30C 0%, #FD7C22 100%);
          border-radius: 8rpx;
        }
      }
    }
    .orderNo_edit_box_btn{
      width: 80%;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      margin: 0 auto;
      background: linear-gradient( 270deg, #FF5429 0%, #FF8118 100%);
      border-radius: 200rpx;
    }
  }
}
</style>
